﻿@model FTBS.Models.Entities.Theater

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<h2>THÔNG TIN RẠP CHIẾU</h2>
<body onload="initialize(@Model.Latitude, @Model.Longitude)">

    @using (Html.BeginForm("Edit", "Theater", null, FormMethod.Post,
                              new { enctype = "multipart/form-data" }))
    {
        @Html.HiddenFor(model => Model.TheaterId)
        @Html.HiddenFor(model => Model.IsDeleted)
        @Html.ValidationSummary(true)
        <table class="table striped bordered hovered" style="margin: 0px 0px 0px 40px">
            <tr>
                <th>Tên rạp phim
                </th>
                <td>
                    <div class="input-control text">
                        @Html.EditorFor(model => model.TheaterName)
                        <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.TheaterName)</p>
                        @if (ViewBag.TheaterName != null)
                        {
                            <p style="color: red; font-size: 10pt">Tên rạp phim này đã có sẵn!</p>
                    }
                    </div>
                </td>
                <th>Số điện thoại
                </th>
                <td>
                    <div class="input-control text">
                        @Html.EditorFor(model => model.PhoneNumber)
                        <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.PhoneNumber)</p>
                    </div>
                </td>
                <th>Thuộc cụm rạp
                </th>
                <td>
                    <div>
                        @Html.DropDownListFor(model => model.UserName, (SelectList)ViewBag.ListSupplier, "--- Chọn tên cụm rạp ---", new { style = "height:35px" })
                        <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.UserName)</p>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    Địa chỉ
                </th>
                <td>
                    <div class="input-control text">
                        @Html.TextBoxFor(model => model.Address, new { id = "address" })
                        <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Address)</p>
                        <p id="errorAddress" style="color: red"></p>
                    </div>
                </td>
                <th>
                    Kinh độ
                </th>
                <td>
                    <div class="input-control text">
                        @Html.TextBoxFor(model => model.Longitude, new { id = "longitude", @readonly = true})
                        <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Longitude)</p>
                    </div>
                </td>
                <th>
                    Vĩ độ
                </th>
                <td>
                    <div class="input-control text">
                        @Html.TextBoxFor(model => model.Latitude, new { id = "latitude", @readonly = true })
                        <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Latitude)</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="inverse" type="button" value="Lấy tọa độ rạp phim" onclick="codeAddress()" />
                </td>
                <td>
                    <div id="map_canvas" style="width: 340px; height: 270px;"></div>
                </td>
                <th>
                     Ảnh đại diện
                 </th>
                 <td colspan="2">
                     <img src="~/Image/Theater/@Html.DisplayFor(ImageURL => Model.ImageURL)" class="shadow" style="width: 340px; height: 270px;"/>
                 </td>
            </tr>
             <tr>
                 @*<td>
                     <div class="input-control file info-state" data-role="input-control">
                         <input id="ImagePath" title="Upload a product image" type="file" name="ImageURL" value="@Model.ImageURL"/>
                         <input type="text" id="__input_file_wrapper__" readonly="" style="z-index: 1; cursor: default;">
                         <button class="btn-file" type="button" name="submit"></button>
                     </div>
                 </td>*@
            </tr>
            <tr>
                <td colspan="2">
                    <input class="large info" type="submit" value="Lưu" />
                </td>
            </tr>
        </table>
    }
    <div>
        @Html.ActionLink("Quay Lại", "Index")
    </div>
</body>


<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> 
<script type="text/javascript">
    var geocoder;
    var map;
    function initialize(latitude, longitude) {
        var lat = latitude;
        var long = longitude;
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(lat, long);
        var myOptions = {
            zoom: 20,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
        });
    }

    function codeAddress() {
        geocoder = new google.maps.Geocoder();
        var address = document.getElementById("address").value;
        if (address.length > 0) {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        draggable: true,
                        position: results[0].geometry.location
                    });
                    document.getElementById("errorAddress").innerHTML = "";
                    $('#latitude').val(results[0].geometry.location.lat());
                    $('#longitude').val(results[0].geometry.location.lng());
                } else {
                    document.getElementById("errorAddress").innerHTML = "Không thể lấy được tọa độ rạp phim! Xin hãy nhập địa chỉ cụ thể hơn!";
                    $('#latitude').val("");
                    $('#longitude').val("");
                }
            });
        }
        else {
            document.getElementById("errorAddress").innerHTML = "Xin hãy nhập địa chỉ của rạp phim!";
            $('#latitude').val("");
            $('#longitude').val("");
        }
    }
</script>